import { useState, useEffect, } from "react"
function Header(){
  useEffect(() =>{
    // 这里写函数写正常的副作用函数
    let timeId = setInterval(()=>{
      console.log('定时器每隔1秒执行一次', Date.now())
    }, 2000)
    return () => {
      // 返回函数里面写一些清除事件或者定时器等操作，类似与vue2 destory函数
      console.log('组件卸载了，类似与类组件的componentWillUnmount' )
      clearInterval(timeId)
    }
  },[]) // // 如果依赖项只写一个空数组，就表示这个副作用，只在组件挂载的时候执行一遍

  return(
    <>
    <div>子组件</div>
    </>
  )
}

function App(){
  const [count, setCount] = useState(4)
  return(
    <>
   {count>2 &&<Header/>}
   <button onClick = {() => setCount(count-1)}>count值：{count}</button>
    </>
  )
}
export default App